﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer</title>

   <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script>
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        dojo.require("esri.layers.FeatureLayer");

        var map;
        var stateName = "Florida";
        var attributeField = "POP1990";

        function init() {
            map = new esri.Map("map", {
                basemap: "streets",
                center: [-83.101, 27.753],
                zoom: 7,
                slider: false
            });
            dojo.connect(map, "onLoad", initOperationalLayer);
        }

        function initOperationalLayer() {
            //创建FeatureLayer对象
            var featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                outFields: ["*"]
            });
            //刷选表达式
            featureLayer.setDefinitionExpression("STATE_NAME = '" + stateName + "'");
            //查询
            var query = new esri.tasks.Query();
            query.where = "STATE_NAME = '" + stateName + "'";
            featureLayer.queryFeatures(query, function (featureSet) {
                var features = featureSet.features;
                var min, max;
                min = max = parseFloat(features[0].attributes[attributeField]);//返回属性值，转换为float类型

                dojo.forEach(features, function (feature) {
                    min = Math.min(min, feature.attributes[attributeField]);//遍历所有属性值
                    max = Math.max(max, feature.attributes[attributeField]);
                });

                //设置范围
                var numRanges = 7;
                var breaks = (max - min) / numRanges;

                var outline = new esri.symbol.SimpleLineSymbol().setWidth(1);//设置外围画线宽度
                var fillColor = new dojo.Color([240, 150, 240, 0.75]);//设置填充颜色
                var defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setSize(1).setOutline(outline);//创建画圆符号

                var renderer = new esri.renderer.ClassBreaksRenderer(defaultSymbol, attributeField);//创建适配器

                //根据值大小设定范围
                for (var i = 0; i < numRanges; i++) {
                    renderer.addBreak(parseFloat(min + (i * breaks)), parseFloat(min + ((i + 1) * breaks)), new esri.symbol.SimpleMarkerSymbol().setSize((i + 1) * 6).setColor(fillColor).setOutline(outline));
                }
                featureLayer.setRenderer(renderer);
            });
            map.addLayer(featureLayer);
        }
        dojo.ready(init);
    </script>
  </head>
  
  <body>
    <div id="map" class="claro" style="width:800px; height:600px; border:1px solid #000;">
    </div>
  </body>

</html>